<template>
    <section class="list">
        <!-- 存在数据 -->
        <transition name="componentFade" mode="out-in">
            <section v-if="list.length">
                <section class="li" v-for="item in list" :key="item">
                    <section class="li-header">
                        <section class="li-car-brand">
                            <img :src="item.brandLogo" alt="" />
                            <p>{{ item.brand }}</p>
                        </section>
                        <section class="li-status">
                            <!-- orderStatus	订单状态（0.待付款；1.已支付；2.支付失败；3.已关闭；4.退款中；5.退款完成） -->
                            <!-- 待支付 -->
                            <span class="waiting" v-if="Number(item.orderStatus) === 0">
                                <CountTimeVue
                                    :create-time="item.createTime"
                                    :expire-time="item.expireTime"
                                    @update="onUpdate"
                                ></CountTimeVue>
                            </span>
                            <!-- 已支付 -->
                            <!-- reportStatus	报告状态（0.待生成；1.成功；2.失败；3.失效） -->
                            <span
                                :class="[Number(item.reportStatus) === 1 ? 'complete' : 'close']"
                                v-else-if="Number(item.orderStatus) === 1"
                                >{{
                                    Number(item.reportStatus) === 0
                                        ? '查询中'
                                        : Number(item.reportStatus) === 1
                                        ? '已生成'
                                        : Number(item.reportStatus) === 2
                                        ? '已失败'
                                        : '已失效'
                                }}</span
                            >
                            <!-- 支付失败； -->
                            <span class="close" v-else-if="Number(item.orderStatus) === 2">支付失败</span>
                            <!-- 已关闭 -->
                            <span class="close" v-else-if="Number(item.orderStatus) === 3">已关闭</span>
                            <!-- 退款中 -->
                            <span class="close" v-else-if="Number(item.orderStatus) === 4">退款中</span>
                            <!-- 退款完成 -->
                            <span class="close" v-else-if="Number(item.orderStatus) === 5">退款完成</span>
                        </section>
                    </section>
                    <section class="li-body">
                        <!-- 产品类型（1.车况-出险；2.车况-维保车况 3 新能源车况） -->
                        <h1>
                            {{
                                item.productType === 1
                                    ? '出险车况'
                                    : item.productType === 2
                                    ? '维保车况'
                                    : '新能源车况'
                            }}-{{ item.modelDetail }}
                        </h1>
                        <p>车架号：{{ item.vin }}</p>
                        <p>订单号：{{ item.orderNo }}</p>
                        <i>日期：{{ item.createTime }}</i>
                    </section>

                    <section class="li-footer">
                        <section class="price">
                            <section class="amount"><i>￥</i>{{ item.amount }}</section>
                            <!-- <section class="singlePrice" v-if="item.singlePrice && item.singlePrice != ''">
                                <i>￥</i>
                                <p>{{ item.singlePrice }}</p>
                            </section> -->
                        </section>
                        <section class="btn-box">
                            <!-- 订单未支付 -->
                            <template v-if="item.orderStatus === 0">
                                <section class="btn-cancel" @click="onCancel(item)">取消</section>
                                <section class="btn-pay" @click="onPay(item)">去支付</section>
                            </template>
                            <!-- 订单已支付 -->
                            <template v-else-if="item.orderStatus === 1">
                                <!-- 报告已生成 -->
                                <template v-if="item.reportStatus === 1">
                                    <section class="btn-look" @click="onOpenReport(item, 'look')">查看</section>
                                </template>
                                <!-- 报告查询中 -->
                                <template v-else-if="item.reportStatus === 0 || item.reportStatus === null">
                                    <RefreshBtn
                                        :data="item"
                                        @update="
                                            res => {
                                                emits('update', res)
                                            }
                                        "
                                    ></RefreshBtn>
                                </template>
                                <span v-if="Number(item.orderStatus) === 4 || Number(item.orderStatus) === 5">
                                    {{ Number(item.orderStatus) === 4 ? '退款中' : '已原路退回，请注意查收' }}
                                </span>
                            </template>
                        </section>
                    </section>
                </section>
            </section>
        </transition>
        <!-- 没有数据 -->
        <transition name="routerFade" mode="out-in">
            <section v-if="emptyStatus">
                <NoOrder describe="暂未查询到任何报告记录" button-text="返回首页" @touch="onOpenDetection"></NoOrder>
            </section>
        </transition>
    </section>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import NoOrder from '@/components/NoOrder.vue'
import { orderRrepay } from '@/apis/order/order'
import { storage } from '@/store/sessionStorage'
import useWeixinSdk from '@/utils/WXSdk'
import CountTimeVue from './CountTime.vue'
import { reportSearchWEIBAO } from '@/apis/report'
import { useRouter } from 'vue-router'
// import queryReport from '@/utils/queryReportStatus'
import RefreshBtn from './refreshBtn.vue'
// import router from '@/router'

const router = useRouter()

//接收来自父级的参数
const props = defineProps(['list', 'emptyStatus'])

//注册父级回调
const emits = defineEmits(['update'])

//数据列表
const list: any[] = reactive([])

const wxUserInfo = storage.get('wxUserInfo') ? JSON.parse(storage.get('wxUserInfo')) : null

const emptyStatus = ref(false)

//刷新中
const refreshing = ref(false)

//监听接收父级参数变化
watchEffect(() => {
    list.length = 0
    list.push(...props.list)
    emptyStatus.value = props.emptyStatus
})

//点击返回首页
const onOpenDetection = () => {
    router.replace('/index')
}

//点击取消支付
const onCancel = (item: any) => {
    emits('update', { type: 'cancel', orderId: item.orderId })
}

//更新数据
const onUpdate = () => {
    emits('update', { type: 'countDown' })
}

//防止重复点击支付，提交订单
const isSubmit = ref(false)

//点击支付按钮
const onPay = (item: any) => {
    if (isSubmit.value) {
        return false
    }
    isSubmit.value = true
    orderRrepay(wxUserInfo.openid, item.orderId, 1).then(res => {
        if (res.data.value === 200) {
            const wxOrderResult = res.data.data.wxOrderResult
            // alert(JSON.stringify(res.data.data))
            //唤起支付
            useWeixinSdk
                .onChooseWXpay({
                    timestamp: wxOrderResult.timeStamp,
                    nonceStr: wxOrderResult.nonceStr,
                    package: wxOrderResult.packageValue,
                    signType: wxOrderResult.signType,
                    paySign: wxOrderResult.paySign
                })
                .then(
                    () => {
                        //支付成功 跳转到查询
                        // onOpenReport(item)
                        router.push({
                            path: '/vehicle-condition/query',
                            query: {
                                orderId: item.orderId,
                                orderNo: item.orderNo,
                                vin: item.vin,
                                licensePlateColor: '',
                                reportType: item.productType,
                                vinParseId: item.vinParseId
                            }
                        })
                        //通知父级组件更新
                        emits('update', { type: 'pay' })
                    },
                    () => {
                        //取消支付 | 支付失败
                        isSubmit.value = false
                    }
                )
        }
    })
}

//点击查看按钮，跳转到报告详情页面
const onOpenReport = (item: any, type: string) => {
    console.log('item', item)
    if (type === 'look') {
        if (item.productType === 2) {
            //维保车况
            reportSearchWEIBAO(item.orderNo).then((res: any) => {
                if (res.data.value === 200) {
                    router.push({
                        path: '/webview',
                        query: {
                            url: res.data.data.maintenanceReportUrl,
                            reportId: res.data.data.reportId
                        }
                    })
                }
            })
        } else if (item.productType === 1) {
            //出险车况
            router.push({
                path: '/report-html',
                query: {
                    reportId: item.reportId
                }
            })
            // router.push({
            //     path: '/collision',
            //     query: {
            //         reportId: item.reportId,
            //         vinParseId: item.vinParseId,
            //         productType: item.productType
            //     }
            // })
        } else if (item.productType === 3) {
            //新能源车况
            router.push({
                path: '/new-energy',
                query: {
                    reportId: item.reportId,
                    vinParseId: item.vinParseId,
                    productType: item.productType
                }
            })
        }
    } else if (type === 'query') {
        // router.push({
        //     path: '/vehicle-condition/query',
        //     query: {
        //         orderId: item.orderId,
        //         orderNo: item.orderNo,
        //         vin: item.vin,
        //         licensePlateColor: item.licensePlateColor,
        //         reportType: item.productType,
        //         vinParseId: item.vinParseId
        //     }
        // })
        refreshing.value = true
        // queryReport.query(
        //     item.vin,
        //     item.orderNo,
        //     item.vinParseId,
        //     item.productType,
        //     false,
        //     'push',
        //     () => {
        //         refreshing.value = false
        //         emits('update', { type: 'refresh' })
        //     },
        //     () => {
        //         //
        //         refreshing.value = false
        //     }
        // )
    }
}
</script>

<style scoped lang="scss">
.list {
    box-sizing: border-box;
    padding-bottom: var(--cxl-size-40);
    .li {
        background-color: var(--cxl-color-white);
        box-sizing: border-box;
        padding: 0 var(--cxl-size-16) var(--cxl-size-16) var(--cxl-size-16);
        border-radius: var(--cxl-size-6);
        margin-bottom: var(--cxl-size-10);

        .li-header {
            height: var(--cxl-size-45);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--cxl-color-f0f0f0);

            .li-car-brand {
                display: flex;
                align-items: center;
                img {
                    display: block;
                    width: var(--cxl-size-24);
                    height: var(--cxl-size-24);
                    margin-right: var(--cxl-size-8);
                }
                p {
                    font-size: var(--cxl-size-12);
                }
            }

            .li-status {
                span {
                    font-size: var(--cxl-size-12);
                    display: flex;
                    align-items: center;
                }
                .waiting {
                    color: var(--cxl-color-FD5B20);
                    font-size: var(--cxl-size-14);
                }
                .complete {
                    color: var(--cxl-color-primary);
                    &.fail {
                        color: var(--cxl-color-999999);
                    }
                }
                .expire {
                    color: var(--cxl-color-999999);
                }
                .query {
                    color: var(--cxl-color-999999);
                }
                .close {
                    color: var(--cxl-color-999999);
                }
            }
        }

        .li-body {
            h1 {
                font-weight: 600;
                font-size: var(--cxl-size-15);
                margin-top: var(--cxl-size-8);
            }
            p {
                font-size: var(--cxl-size-12);
                margin-top: var(--cxl-size-8);
            }
            i {
                display: block;
                margin: var(--cxl-size-8) 0;
                color: var(--cxl-color-999999);
                font-size: var(--cxl-size-12);
            }
        }
        .li-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: var(--cxl-size-18);
            .price {
                font-size: var(--cxl-size-24);
                font-weight: 600;
                display: flex;
                align-items: flex-end;
                i {
                    font-size: var(--cxl-size-14);
                }
                .singlePrice {
                    font-size: var(--cxl-size-18);
                    font-weight: 400;
                    margin-left: var(--cxl-size-10);
                    display: flex;
                    align-items: center;
                    i {
                        text-decoration: none;
                        color: var(--cxl-color-999999);
                    }
                    p {
                        color: var(--cxl-color-999999);
                        text-decoration: line-through;
                    }
                }
            }
            .btn-box {
                display: flex;
                > section {
                    width: 6.67rem;
                    height: var(--cxl-size-30);
                    border-radius: var(--cxl-size-15);
                    text-align: center;
                    line-height: var(--cxl-size-30);
                    font-size: var(--cxl-size-12);
                    background-color: var(--cxl-color-primary);
                    color: var(--cxl-color-white);
                    box-sizing: border-box;
                    &.btn-cancel {
                        border: 1px solid var(--cxl-color-primary);
                        color: var(--cxl-color-primary);
                        background-color: var(--cxl-color-white);
                    }
                    &:nth-child(2) {
                        margin-left: var(--cxl-size-10);
                    }
                }
            }
        }
    }
}

.none {
    height: calc(100vh - var(--cxl-size-12) - var(--cxl-size-40));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 6.4rem;
    box-sizing: border-box;
    flex-wrap: wrap;
    padding-bottom: calc(var(--cxl-size-12) + var(--cxl-size-40));
    > section {
        width: 100%;
        text-align: center;
    }
    img {
        display: block;
        width: 8.4rem;
        margin: auto;
    }
    p {
        font-size: var(--cxl-size-12);
        color: var(--cxl-color-999999);
        margin: var(--cxl-size-18) 0;
    }
}
</style>
